<template>
	<div class="top">
		<h3>基础信息</h3>
		<form class="f_top">
			<el-form-item label="区域" style="width: 400px;">
				<el-select v-model="rowData.regionName">
					<el-option v-for="item in data.regionName" :label="item.regionName" :value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="房号" style="width: 400px;">
				<el-input v-model="rowData.houseNumber" placeholder="输入房号" />
			</el-form-item>
			<el-form-item label="所在楼层" style="width: 300px;">
				<el-input v-model="rowData.floor" placeholder="输入楼层" />
			</el-form-item>
			<el-form-item label="地址" style="width: 400px;">
				<el-input v-model="rowData.address" placeholder="备注" />
			</el-form-item>
			<el-form-item label="建筑面积" style="width: 400px;">
				<el-input v-model="rowData.areaBuilding" placeholder="备注" />
			</el-form-item>
			<el-form-item label="套内面积" style="width: 400px;">
				<el-input v-model="rowData.areaInterior" placeholder="备注" />
			</el-form-item>
		</form>
	</div>

	<div class="button">
		<h3>房屋状态</h3>
		<form class="f_button">
			<el-form-item label="销售状态" class="xz" style="width: 800px;">
				<el-select v-model="rowData.saleStatus" placeholder="请选择" style="width: 200px; right: 5px;">
					<el-option label="已销售" value="已销售"></el-option>
					<el-option label="未销售" value="未销售"></el-option>
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="rowData.saleDate" type="date" placeholder="销售时间"
							style="width: 150px" />
					</el-col>
				</el-form-item>
			</el-form-item>

			<el-form-item label="装修状态" class="xz" style="width: 800px;">
				<el-select v-model="rowData.renovationStatus" placeholder="请选择装修状态" style="width: 200px;right: 5px;">
					<el-option label="已装修" value="已装修"></el-option>
					<el-option label="未装修" value="未装修"></el-option>
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="rowData.renovationDate" type="date" placeholder="装修日期"
							style="width: 150px" />
					</el-col>
				</el-form-item>
			</el-form-item>

			<el-form-item label="入住状态" class="xz" style="width: 800px;">
				<el-select v-model="rowData.occupancyStatus" placeholder="请选择入住状态" style="width: 200px;right: 5px;">
					<el-option label="已入住" value="已入住"></el-option>
					<el-option label="未入住" value="未入住"></el-option>
				</el-select>
				<el-form-item>
					<el-col :span="11">
						<el-date-picker v-model="rowData.occupancyDate" type="date" placeholder="入住日期"
							style="width: 150px" />
					</el-col>
				</el-form-item>
			</el-form-item>

			<el-form-item label="使用状态" class="xz" style="width: 800px;">
				<el-select v-model="rowData.usageStatus" placeholder="请选择使用状态" style="width: 200px;right: 5px;">
					<el-option label="闲置" value="闲置"></el-option>
					<el-option label="自住" value="自住"></el-option>
				</el-select>
			</el-form-item>
		</form>
	</div>
	<div class="conmit">
		<el-button class="but1">取消</el-button>
		<el-button class="but2" @click="upHouse()">确定</el-button>
	</div>
</template>

<script setup>
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import {
		reactive,
		onMounted
	} from 'vue';
	import $http from '../router/AxiosApi';

	const route = useRoute();
	// 从路由查询参数中获取原始数据的 JSON 字符串  
	const rawRowDataStr = route.query.rowData;
	// 解析 JSON 字符串为对象  
	const rawRowData = JSON.parse(rawRowDataStr);
	// 使用 reactive 创建一个新的响应式对象（如果需要的话）  
	const rowData = reactive(rawRowData);
	const router = useRouter()
	onMounted(() => {
		loadRegion()
	});

	const upHouse = () => {
		$http.put("updateHouse", rowData).then((res) => {
			console.log(rowData)
			router.push({
				name: 'HouseList'
			})
		})
	}
	const data = reactive({
		regionName: []
	})
	const loadRegion = () => {
		$http.post("selectRegion").then((res) => {
			console.log(res.data)
			data.regionName = res.data
		})
	}
</script>

<style>
	.top {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 10px;
		overflow: hidden;
	}

	.button {
		text-align: left;
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		overflow: hidden;
	}

	.conmit {
		border-radius: 10px;
		padding: 24px;
		background-color: #fff;
		margin-bottom: 16px;
		display: -webkit-box;
		display: flex;
		justify-content: flex-end;
	}

	.f_top {
		margin-left: 10px;
	}

	.f_button {
		width: 1000px;
	}

	.el-select__wrapper el-tooltip__trigger el-tooltip__trigger {
		height: 40px;
	}

	.el-input {
		height: 40px;

	}

	.el-form-item__label {
		width: 150px;
	}

	.but1 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #7e8081;
		background-color: #fafafa;
	}

	.but2 {
		width: 100px;
		height: 40px;
		font-size: 14px;
		padding: 0px 20px;
		color: #fff;
		background-color: #80e1b6;
		border-color: #80e1b6;
	}
</style>